<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="" prop="productNo">
        <el-input
          v-model="queryParams.productNo"
          placeholder="请输入货号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="buyManufacturerCode">
        <el-input
          v-model="queryParams.buyManufacturerCode"
          placeholder="请输入生产厂家"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="" prop="firstLevelColumn">
        <!-- <el-input v-model="queryParams.firstLevelColumn" placeholder="请输入一级栏目" clearable
          @keyup.enter.native="handleQuery" /> -->
        <el-select
          v-model="queryParams.firstLevelColumn"
          placeholder="请选择一级类目"
          clearable
        >
          <el-option
            v-for="dict in dict.type.sys_product_pl"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="colorPropertyStr" label-width="100px">
        <el-input
          v-model="queryParams.colorPropertyStr"
          placeholder="请输入颜色"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="designFabricName">
        <el-input
          v-model="queryParams.designFabricName"
          placeholder="主身料名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <el-button
          :icon="!isOpen ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
          size="mini"
          @click="shouqi"
          >展开/收起</el-button
        >
      </el-form-item>
      <div v-show="isOpen">
        <el-form-item label="" prop="isSupplementOrder">
          <el-input
            v-model="queryParams.isSupplementOrder"
            placeholder="请输入是否补单"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="versisonNumber">
          <el-input
            v-model="queryParams.versisonNumber"
            placeholder="请输入版单号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="dosage">
          <el-input
            v-model="queryParams.dosage"
            placeholder="请输入用量"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="fabricFactory">
          <el-input
            v-model="queryParams.fabricFactory"
            placeholder="请输入面料工厂"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="fabricItemNumber">
          <el-input
            v-model="queryParams.fabricItemNumber"
            placeholder="请输入面料货号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="functionalHangtag">
          <el-input
            v-model="queryParams.functionalHangtag"
            placeholder="请输入功能吊牌"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="middleMeshFabric">
          <el-input
            v-model="queryParams.middleMeshFabric"
            placeholder="请输入中间层/网纱/配布型号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="liningMiddleWaveColor">
          <el-input
            v-model="queryParams.liningMiddleWaveColor"
            placeholder="请输入里料/中间层/浪底/网布配色"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="moldCupModel">
          <el-input
            v-model="queryParams.moldCupModel"
            placeholder="请输入模杯型号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="moldCupColor">
          <el-input
            v-model="queryParams.moldCupColor"
            placeholder="请输入模杯颜色"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="backBuckleModel">
          <el-input
            v-model="queryParams.backBuckleModel"
            placeholder="请输入背扣型号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="backBuckleName">
          <el-input
            v-model="queryParams.backBuckleName"
            placeholder="请输入背扣名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="backBuckleColor">
          <el-input
            v-model="queryParams.backBuckleColor"
            placeholder="请输入背扣颜色"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="ribbonModel">
          <el-input
            v-model="queryParams.ribbonModel"
            placeholder="请输入织带型号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="ribbonName">
          <el-input
            v-model="queryParams.ribbonName"
            placeholder="请输入织带名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="ribbonColor">
          <el-input
            v-model="queryParams.ribbonColor"
            placeholder="请输入织带颜色"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="zipperModel">
          <el-input
            v-model="queryParams.zipperModel"
            placeholder="请输入拉链型号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="zipperName">
          <el-input
            v-model="queryParams.zipperName"
            placeholder="请输入拉链名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="slider">
          <el-input
            v-model="queryParams.slider"
            placeholder="请输入拉链头"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="zipperColor">
          <el-input
            v-model="queryParams.zipperColor"
            placeholder="请输入拉链颜色"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="pantRope">
          <el-input
            v-model="queryParams.pantRope"
            placeholder="请输入裤头绳/帽绳"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="fittingProcessParts">
          <el-input
            v-model="queryParams.fittingProcessParts"
            placeholder="请输入贴合工艺部位"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="adjustableBuckle">
          <el-input
            v-model="queryParams.adjustableBuckle"
            placeholder="请输入调节扣"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="buyExecutiveStandard">
          <el-input
            v-model="queryParams.buyExecutiveStandard"
            placeholder="请输入执行标准"
          />
        </el-form-item>
        <el-form-item label="" prop="fakeTwoMaterial">
          <el-input
            v-model="queryParams.fakeTwoMaterial"
            placeholder="假两件里料"
          />
        </el-form-item>
      </div>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['product:buy:add']">新增</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['product:buy:edit']"
          >修改</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['product:buy:remove']">删除</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['product:buy:export']"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" plain icon="el-icon-upload" @click="daoru"
          >导入</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-refresh"
          size="mini"
          @click="handleRefreshCache"
          v-hasPermi="['product:buy:getearlyestall']"
          >同步数据</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <div ref="tableDom">
      <u-table
        :maxHeight="buyList.length ? tableHeight : 'auto'"
        v-loading="loading"
        :data="buyList"
        @selection-change="handleSelectionChange"
        :row-style="{ height: '100px' }"
        @row-dblclick="t"
        use-virtual
        :row-height="30"
        :height="700"
      >
        <u-table-column type="selection" width="55" align="center" />
        <!-- <u-table-column label="id" align="center" prop="id" /> -->
        <!-- <u-table-column label="产品货号ID" align="center" prop="templateId" width="90px" /> -->
        <u-table-column
          fixed
          :label="'设计师'"
          align="center"
          prop="designDesigners"
        />

        <u-table-column
          fixed
          :label="'下单时间'"
          align="center"
          prop="orderTime"
          width="100px"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.orderTime, "{y}-{m}-{d}") }}</span>
          </template>
        </u-table-column>
        <u-table-column
          fixed
          :label="'上架时间'"
          align="center"
          prop="newTime"
          width="100px"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.newTime, "{y}-{m}-{d}") }}</span>
          </template>
        </u-table-column>
        <u-table-column
          fixed
          :label="'生产厂家'"
          align="center"
          prop="buyManufacturerCode"
        />
        <u-table-column
          fixed
          width="100px"
          :label="'货号'"
          align="center"
          prop="productNo"
        />
        <u-table-column
          fixed
          label="版单号"
          align="center"
          prop="versisonNumber"
        />

        <u-table-column
          fixed
          width="110px"
          :label="'产品图片'"
          align="center"
          prop="picUrl"
        >
          <template #default="scope">
            <image-preview :src="scope.row.picUrl" :width="80" :height="80" />
            <!-- <el-popover
              effect="light"
              trigger="click"
              placement="left"
              width="auto"
              v-show="scope.row.picUrl"
            >
              <template #default>
                <img
                  :src="pjtUrl + scope.row.picUrl"
                  style="width: 800px; height: 600px; object-fit: contain"
                  lazy
                />
              </template>
              <template #reference>
                <img
                  :src="pjtUrl + scope.row.picUrl"
                  style="object-fit: contain; width: 80px; height: 80px"
                  lazy
                />
              </template>
            </el-popover> -->
          </template>
        </u-table-column>

        <u-table-column
          fixed
          :label="'颜色属性'"
          align="center"
          prop="colorPropertyList"
          width="250px"
        />
        <u-table-column
          prop=""
          width="110px"
          :label="'logo颜色'"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <el-button size="mini" @click="goto(scope.row)">
              颜色配置
            </el-button> -->
            <div
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
              "
              @click="goto(scope.row)"
            >
              颜色配置
            </div>
          </template>
        </u-table-column>
        <u-table-column
          :label="'首单数量'"
          align="center"
          prop="orderNumList"
          width="250px"
        />
        <u-table-column
          :label="'一级类目'"
          align="center"
          prop="firstLevelColumn"
        />
        <u-table-column
          width="140"
          label="二级类目"
          align="center"
          prop="firstLevelExtendedColumn"
        />
        <u-table-column
          width="140"
          :label="'三级类目'"
          align="center"
          prop="secondLevelColumn"
        />
        <u-table-column
          prop="purchasingAccessoriesMark"
          width="110px"
          :label="'修改记录'"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <el-button size="mini" @click="go(scope.row)">
              修改记录
            </el-button> -->
            <div
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
              "
              @click="go(scope.row)"
            >
              修改记录
            </div>
          </template>
        </u-table-column>

        <!-- <u-table-column :label="'主推款'" align="center" prop="operationMainProducts" /> -->

        <u-table-column
          width="250px"
          :label="'主身料名称'"
          align="center"
          prop="designFabricName"
        />
        <u-table-column
          width="100px"
          :label="'假两件里料'"
          align="center"
          prop="fakeTwoMaterial"
        />
        <u-table-column :label="'销售价格'" align="center" prop="salePrice" />
        <u-table-column :label="'吊牌价格'" align="center" prop="tagPrice" />
        <u-table-column
          :label="'执行标准'"
          align="center"
          prop="buyExecutiveStandard"
          width="250px"
        />
        <u-table-column
          label="面料工厂"
          align="center"
          prop="fabricFactory"
          width="250px"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.fabricComposition }}</span> -->
              <el-input
                v-model="scope.row.fabricFactory"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.fabricFactory }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column
          label="面料货号"
          align="center"
          prop="fabricItemNumber"
          width="250px"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.fabricComposition }}</span> -->
              <el-input
                v-model="scope.row.fabricItemNumber"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.fabricItemNumber }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column label="用量" align="center" prop="dosage" width="250px">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.fabricComposition }}</span> -->
              <el-input
                v-model="scope.row.dosage"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.dosage }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column
          prop="fabricComposition"
          :label="'面料成分'"
          align="center"
          width="250px"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.fabricComposition }}</span> -->
              <el-input
                v-model="scope.row.fabricComposition"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.fabricComposition }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column
          label="功能吊牌"
          align="center"
          prop="functionalHangtag"
          width="250px"
        />
        <u-table-column
          label="中间层/网纱/配布型号"
          align="center"
          prop="middleMeshFabric"
          width="250px"
        />
        <u-table-column
          label="里料/中间层/浪底/网布配色"
          align="center"
          prop="liningMiddleWaveColor"
          width="280px"
        />
        <u-table-column
          label="模杯型号"
          align="center"
          prop="moldCupModel"
          width="200px"
        />
        <u-table-column
          label="模杯颜色"
          align="center"
          prop="moldCupColor"
          width="200px"
        />

        <u-table-column
          label="背扣型号"
          align="center"
          prop="backBuckleModel"
          width="200px"
        />
        <u-table-column
          label="背扣名称"
          align="center"
          prop="backBuckleName"
          width="200px"
        />
        <u-table-column
          label="背扣颜色"
          align="center"
          prop="backBuckleColor"
          width="200px"
        />
        <u-table-column
          label="织带型号"
          align="center"
          prop="ribbonModel"
          width="200px"
        />
        <u-table-column
          label="织带名称"
          align="center"
          prop="ribbonName"
          width="200px"
        />
        <u-table-column
          label="织带颜色"
          align="center"
          prop="ribbonColor"
          width="200px"
        />
        <u-table-column
          label="拉链型号"
          align="center"
          prop="zipperModel"
          width="200px"
        />
        <u-table-column
          label="拉链名称"
          align="center"
          prop="zipperName"
          width="200px"
        />
        <u-table-column
          label="拉链头"
          align="center"
          prop="slider"
          width="200px"
        />
        <u-table-column
          label="拉链颜色"
          align="center"
          prop="zipperColor"
          width="200px"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.fabricComposition }}</span> -->
              <el-input
                v-model="scope.row.zipperColor"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.zipperColor }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column
          label="裤头绳/帽绳"
          align="center"
          prop="pantRope"
          width="200px"
        />
        <u-table-column
          label="贴合工艺部位"
          align="center"
          prop="fittingProcessParts"
          width="200px"
        />
        <u-table-column
          label="调节扣"
          align="center"
          prop="adjustableBuckle"
          width="200px"
        />
        <u-table-column label="备注" align="center" prop="remark">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
              <!-- <span>{{ scope.row.fabricComposition }}</span> -->
              <el-input
                v-model="scope.row.remark"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.remark }}
                </span>
              </div>
            </el-popover>
          </template>
        </u-table-column>
        <u-table-column
          label="是否补单"
          align="center"
          prop="isSupplementOrder"
        />
        <u-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['product:buy:edit']"
              >修改</el-button
            >
            <!-- <el-button size="mini" type="text"> </el-button> -->
            <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['product:buy:remove']">删除</el-button> -->
          </template>
        </u-table-column>
      </u-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改采购信息对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="60%"
      height="100%"
      append-to-body
    >
      <div class="el-dialog-div">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-col :span="8">
            <!-- <el-form-item label="产品一级表ID" prop="templateId">
          <el-input v-model="form.templateId" placeholder="请输入产品一级表ID" />
        </el-form-item> -->
            <el-form-item label="是否补单" prop="isSupplementOrder">
              <el-input
                v-model="form.isSupplementOrder"
                placeholder="请输入是否补单"
              />
            </el-form-item>
            <el-form-item label="版单号" prop="versisonNumber">
              <el-input
                v-model="form.versisonNumber"
                placeholder="请输入版单号"
              />
            </el-form-item>
            <el-form-item label="用量" prop="dosage">
              <!-- <el-input v-model="form.dosage" placeholder="请输入用量" /> -->
              <el-input
                v-model="form.dosage"
                placeholder="请输入用量"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 12 }"
                :style="{ width: '100%' }"
              />
            </el-form-item>
            <el-form-item label="面料工厂" prop="fabricFactory">
              <!-- <el-input v-model="form.fabricFactory" placeholder="请输入面料工厂" /> -->
              <el-input
                v-model="form.fabricFactory"
                placeholder="请输入面料工厂"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 12 }"
                :style="{ width: '100%' }"
              />
            </el-form-item>
            <el-form-item label="面料货号" prop="fabricItemNumber">
              <!-- <el-input v-model="form.fabricItemNumber" placeholder="请输入面料货号" /> -->
              <el-input
                v-model="form.fabricItemNumber"
                placeholder="请输入面料货号"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 12 }"
                :style="{ width: '100%' }"
              />
            </el-form-item>
            <el-form-item label="功能吊牌" prop="functionalHangtag">
              <el-input
                v-model="form.functionalHangtag"
                placeholder="请输入功能吊牌"
              />
            </el-form-item>
            <el-form-item label="中间层/网纱/配布型号" prop="middleMeshFabric">
              <el-input
                v-model="form.middleMeshFabric"
                placeholder="请输入中间层/网纱/配布型号"
              />
            </el-form-item>
            <el-form-item
              label="里料/中间层/浪底/网布配色"
              prop="liningMiddleWaveColor"
            >
              <el-input
                v-model="form.liningMiddleWaveColor"
                placeholder="请输入里料/中间层/浪底/网布配色"
              />
            </el-form-item>
            <el-form-item label="模杯型号" prop="moldCupModel">
              <el-input
                v-model="form.moldCupModel"
                placeholder="请输入模杯型号"
              />
            </el-form-item>
            <el-form-item label="模杯颜色" prop="moldCupColor">
              <el-input
                v-model="form.moldCupColor"
                placeholder="请输入模杯颜色"
              />
            </el-form-item>
            <el-form-item label="背扣型号" prop="backBuckleModel">
              <el-input
                v-model="form.backBuckleModel"
                placeholder="请输入背扣型号"
              />
            </el-form-item>
            <el-form-item label="生产厂家" prop="buyManufacturerCode">
              <el-input
                v-model="form.buyManufacturerCode"
                placeholder="请输入生产厂家"
              />
            </el-form-item>
            <el-form-item label="假两件里料" prop="fakeTwoMaterial">
              <el-input
                v-model="form.fakeTwoMaterial"
                placeholder="请输入假两件里料"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="背扣名称" prop="backBuckleName">
              <el-input
                v-model="form.backBuckleName"
                placeholder="请输入背扣名称"
              />
            </el-form-item>
            <el-form-item label="背扣颜色" prop="backBuckleColor">
              <el-input
                v-model="form.backBuckleColor"
                placeholder="请输入背扣颜色"
              />
            </el-form-item>
            <el-form-item label="织带型号" prop="ribbonModel">
              <el-input
                v-model="form.ribbonModel"
                placeholder="请输入织带型号"
              />
            </el-form-item>
            <el-form-item label="织带名称" prop="ribbonName">
              <el-input
                v-model="form.ribbonName"
                placeholder="请输入织带名称"
              />
            </el-form-item>
            <el-form-item label="织带颜色" prop="ribbonColor">
              <el-input
                v-model="form.ribbonColor"
                placeholder="请输入织带颜色"
              />
            </el-form-item>
            <el-form-item label="拉链型号" prop="zipperModel">
              <el-input
                v-model="form.zipperModel"
                placeholder="请输入拉链型号"
              />
            </el-form-item>
            <el-form-item label="拉链名称" prop="zipperName">
              <el-input
                v-model="form.zipperName"
                placeholder="请输入拉链名称"
              />
            </el-form-item>
            <el-form-item label="拉链头" prop="slider">
              <el-input v-model="form.slider" placeholder="请输入拉链头" />
            </el-form-item>
            <el-form-item label="拉链颜色" prop="zipperColor">
              <el-input
                v-model="form.zipperColor"
                placeholder="请输入拉链颜色"
              />
            </el-form-item>
            <el-form-item label="裤头绳/帽绳" prop="pantRope">
              <el-input
                v-model="form.pantRope"
                placeholder="请输入裤头绳/帽绳"
              />
            </el-form-item>
            <el-form-item label="贴合工艺部位" prop="fittingProcessParts">
              <el-input
                v-model="form.fittingProcessParts"
                placeholder="请输入贴合工艺部位"
              />
            </el-form-item>
            <el-form-item label="调节扣" prop="adjustableBuckle">
              <el-input
                v-model="form.adjustableBuckle"
                placeholder="请输入调节扣"
              />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>

            <el-form-item label="执行标准" prop="buyExecutiveStandard">
              <el-input
                v-model="form.buyExecutiveStandard"
                placeholder="请输入执行标准"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item></el-form-item>
          </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 添加或修改产品二级信息对话框 :on-change="handleChange"-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="500px"
      append-to-body
    >
      <el-upload
        :action="Upload.url"
        :headers="Upload.headers"
        :limit="limit"
        :on-exceed="handleExceed"
        :on-success="handlePictureSuccessPic"
        :before-upload="beforeAvatarUpload"
        :on-preview="handlePictureCardPreview"
        :file-list="fileLi"
        :on-change="changeFile1"
      >
        <el-button size="small" type="primary">导入文件</el-button>
        <!-- <i class="el-icon-plus"></i> -->
      </el-upload>
    </el-dialog>

    <!-- 添加或修改产品二级信息对话框 :on-change="handleChange"-->
    <el-dialog title="颜色配置" :visible.sync="Secondryopen" append-to-body>
      <el-table
        border
        id="bootstrap‐table"
        :data="secondryList"
        :row-style="{ height: '100px' }"
      >
        <el-table-column label="货号" align="center" prop="productNo" />

        <el-table-column label="图片" align="center" prop="picUrl">
          <template #default="scope">
            <image-preview :src="scope.row.picUrl" :width="80" :height="80" />
            <!-- <el-popover
              effect="light"
              trigger="click"
              placement="left"
              width="auto"
              v-show="scope.row.picUrl"
            >
              <template #default>
                <img
                  :src="pjtUrl + scope.row.picUrl"
                  style="width: 800px; height: 600px; object-fit: contain"
                />
              </template>
              <template #reference>
                <img
                  :src="pjtUrl + scope.row.picUrl"
                  style="width: 100px; height: 100px; object-fit: contain"
                />
              </template>
            </el-popover> -->
          </template>
        </el-table-column>
        <el-table-column label="颜色属性" align="center" prop="colorProperty" />
        <el-table-column label="产品编码" align="center" prop="productCode" />

        <el-table-column label="logo图片" align="center" prop="logoUrl">
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="click"
              placement="left"
              width="auto"
              v-show="scope.row.logoUrl"
            >
              <template #default>
                <img
                  :src="pjtUrl + scope.row.logoUrl"
                  style="width: 600px; height: 800px; object-fit: contain"
                />
              </template>
              <template #reference>
                <img
                  :src="pjtUrl + scope.row.logoUrl"
                  style="width: 100px; height: 100px; object-fit: contain"
                />
              </template>
            </el-popover>
          </template>
          <!-- <template slot-scope="scope">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <el-image style="width: 100px; height: 100px" :src="scope.row.logoFullUrl"></el-image></template> -->
        </el-table-column>
        <el-table-column
          label="尺寸"
          align="center"
          prop="proTemplateSizeList"
          :formatter="formatData"
        />
      </el-table>
    </el-dialog>
    <!-- 添加或修改产品二级信息对话框 :on-change="handleChange"-->
    <el-dialog title="辅料修改记录" :visible.sync="historyopen" append-to-body>
      <el-table :data="historyList" :row-style="{ height: '100px' }">
        <!-- <el-table-column label="产品颜色信息修改ID" align="center" prop="id" />
            <el-table-column label="产品颜色信息ID" align="center" prop="proTemplateSecondryId" /> -->
        <!-- <el-table-column label="修改前图片" align="center" prop="purchasingBeforePicurl" /> -->
        <el-table-column
          label="修改前图片"
          align="center"
          prop="purchasingBeforePicurl"
        >
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="click"
              placement="left"
              width="auto"
              v-show="scope.row.purchasingBeforePicurl"
            >
              <template #default>
                <img
                  :src="pjtUrl + scope.row.purchasingBeforePicurl"
                  style="width: 800px; height: 600px; object-fit: contain"
                />
              </template>
              <template #reference>
                <img
                  :src="pjtUrl + scope.row.purchasingBeforePicurl"
                  style="width: 100px; height: 100px; object-fit: contain"
                />
              </template>
            </el-popover>
          </template>
          <!-- <template slot-scope="scope">
                                                                  <el-image style="width: 100px; height: 100px" :src="scope.row.logoFullUrl"></el-image></template> -->
        </el-table-column>
        <!-- <el-table-column label="修改后图片" align="center" prop="purchasingAfterPicurl" /> -->
        <el-table-column
          label="修改后图片"
          align="center"
          prop="purchasingAfterPicurl"
        >
          <template #default="scope">
            <el-popover
              effect="light"
              trigger="click"
              placement="left"
              width="auto"
              v-show="scope.row.purchasingAfterPicurl"
            >
              <template #default>
                <img
                  :src="pjtUrl + scope.row.purchasingAfterPicurl"
                  style="width: 800px; height: 600px; object-fit: contain"
                />
              </template>
              <template #reference>
                <img
                  :src="pjtUrl + scope.row.purchasingAfterPicurl"
                  style="width: 100px; height: 100px; object-fit: contain"
                />
              </template>
            </el-popover>
          </template>
          <!-- <template slot-scope="scope">
                                                                  <el-image style="width: 100px; height: 100px" :src="scope.row.logoFullUrl"></el-image></template> -->
        </el-table-column>
        <el-table-column
          label="修改备注说明"
          align="center"
          prop="purchasingAccessoriesMark"
        />
        <el-table-column
          width="150px"
          :label="'修改时间'"
          align="center"
          prop="createTime"
        >
          <!-- <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}-{H}-{}') }}</span>
                </template> -->
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  listHistory,
  getHistory,
  delHistory,
  addHistory,
  updateHistory,
} from "@/api/product/history";
import {
  listSecondry,
  getSecondry,
  delSecondry,
  addSecondry,
  updateSecondry,
  getInfoByName,
  colorLike,
} from "@/api/product/secondry";
import {
  listBuy,
  getBuy,
  delBuy,
  addBuy,
  updateBuy,
  refreshCache,
} from "@/api/shop/buy";
//--------导入token
import { getToken } from "@/utils/auth";
export default {
  name: "Buy",
  dicts: [
    "sys_product_qudao",
    "sys_product_size",
    "sys_product_design",
    "sys_product_scene",
    "sys_product_coder",
    "sys_product_yf",
    "sys_product_cycle",
    "sys_product_pl",
  ],
  data() {
    return {
      historyopen: false,
      historyList: [],
      Secondryopen: false,
      secondryList: [],
      //搜索栏展示和收起
      isOpen: false,
      // 图片数量限制
      limit: 2,
      fileLi: [],
      file: "",

      dialogVisible: false,
      pjtUrl: process.env.VUE_APP_BASE_API,
      Upload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/product/buy/importProBuy",
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 采购信息表格数据
      buyList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        templateId: null,
        isSupplementOrder: null,
        versisonNumber: null,
        dosage: null,
        fabricFactory: null,
        fabricItemNumber: null,
        functionalHangtag: null,
        middleMeshFabric: null,
        liningMiddleWaveColor: null,
        moldCupModel: null,
        moldCupColor: null,
        backBuckleModel: null,
        backBuckleName: null,
        backBuckleColor: null,
        ribbonModel: null,
        ribbonName: null,
        ribbonColor: null,
        zipperModel: null,
        zipperName: null,
        slider: null,
        zipperColor: null,
        pantRope: null,
        fittingProcessParts: null,
        adjustableBuckle: null,
        buyManufacturerCode: null,
        buyExecutiveStandard: null,
        fakeTwoMaterial: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        templateId: [
          { required: true, message: "产品一级表ID不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    var _this = this;
    this.resizeTable();
    window.onresize = function () {
      _this.resizeTable();
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //搜索栏展示与收起
    shouqi() {
      // console.log(1);
      this.isOpen = !this.isOpen;
    },
    //点击某一行
    t(row, column, cell, event) {
      console.log(row, column, cell, event);
      this.handleUpdate(row);
    },
    goto(row) {
      // console.log(row.id);
      // this.$router.push({ path: '/product/secondry', query: { id: row.templateId } })
      listSecondry({ templateId: row.templateId }).then((response) => {
        this.secondryList = response.rows;
      });
      this.Secondryopen = true;
    },
    formatData(row) {
      let rowPerson = (row && row.proTemplateSizeList) || [];
      let arr = [];
      rowPerson.forEach((item) => {
        //如果数据特别多的话,还可以在这里加if判断,仅展示规定的数据
        arr.push(item.size);
      });
      //
      return arr.join("/");
    },
    go(row) {
      console.log(row.productNo);
      listHistory({ productNo: row.productNo }).then((response) => {
        this.historyList = response.rows;
      });
      this.historyopen = true;
      // this.$router.push({ path: '/product/history', query: { productNo: row.productNo } })
    },
    //部门文件导入修改打开
    daoru() {
      this.dialogVisible = true;
    },
    /** 查询采购信息列表 */
    getList() {
      this.loading = true;
      listBuy(this.queryParams).then((response) => {
        this.buyList = response.rows;
        console.log(JSON.stringify(this.buyList));
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        templateId: null,
        isSupplementOrder: null,
        versisonNumber: null,
        dosage: null,
        fabricFactory: null,
        fabricItemNumber: null,
        functionalHangtag: null,
        middleMeshFabric: null,
        liningMiddleWaveColor: null,
        moldCupModel: null,
        moldCupColor: null,
        backBuckleModel: null,
        backBuckleName: null,
        backBuckleColor: null,
        ribbonModel: null,
        ribbonName: null,
        ribbonColor: null,
        zipperModel: null,
        zipperName: null,
        slider: null,
        zipperColor: null,
        pantRope: null,
        fittingProcessParts: null,
        adjustableBuckle: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        productNo: null,
        colorPropertyStr: null,
        firstLevelColumn: null,
        designFabricName: null,
        fakeTwoMaterial: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.templateId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      return;
      this.reset();
      this.open = true;
      this.title = "添加采购信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.templateId || this.ids;
      getBuy(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改采购信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.templateId != null) {
            updateBuy(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addBuy(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除采购信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delBuy(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "product/buy/export",
        {
          ...this.queryParams,
        },
        `buy_${new Date().getTime()}.xlsx`
      );
    },
    //图片上传前的相关判断
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 100;
      // if (!isJPG) {
      //     this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isLt2M;
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.picUrl = file.url;
      this.imageUrl = file.url;
      // this.dialogVisible = true;
    },
    //
    // handleChange(file, fileList) {
    //     if (fileList.length > 0) {
    //         this.fileLi = [fileList[fileList.length - 1]]
    //     }
    //     // }
    // },

    //文件导入成功回传

    handlePictureSuccessPic(res, file) {
      console.log(JSON.stringify(res));
      //设置图片访问路径 （url 后台传过来的的上传地址）
      // this.picUrl = file.response.url;
      // const url = file.response.fileName;
      this.file = file.response.url;
      console.log(JSON.stringify(this.file));
      if (res.code == 200) {
        this.$modal.msgSuccess("导入成功");

        this.dialogVisible = false;
        this.getList();
        return true;
      } else {
        this.$modal.msgError(res.msg);
        this.dialogVisible = true;
        // this.$message.msgError('该颜色未在字典定义')
        return;
      }
    },
    // //图片上传成功后的回调
    // handlePictureSuccess(res, file) {
    //     //设置图片访问路径 （url 后台传过来的的上传地址）
    //     this.imageUrl = file.response.url;
    //     // const url = file.response.fileName;
    //     this.logoUrl = file.response.fileName;
    //     // console.log(JSON.stringify(url));
    // },

    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传链接文件数量不能超过 ${this.limit} 个!`);
    },
    // 上传文件让第二次覆盖第一的文件
    changeFile1(file, fileList) {
      if (fileList.length > 1) {
        this.fileLi = fileList.slice(-1);

        // this.fileList = [fileList[fileList.length - 1]]//这一步，是 展示最后一次选择文件
      }
      // this.fileSpecial = fileList;
    },
    // table自动高度
    returnTableHeight(ref, bottomOffset) {
      let height = null;
      height =
        window.innerHeight - ref.getBoundingClientRect().top - bottomOffset;
      return height;
    },

    resizeTable() {
      this.$nextTick(() => {
        this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100);
      }, 0);
    },
    /** 刷新缓存按钮操作 Warning*/
    handleRefreshCache() {
      this.$modal.msgWarning("数据正在同步，请稍候");
      refreshCache().then(() => {
        this.$modal.msgSuccess("同步数据成功");
        this.getList();
        // this.$store.dispatch('dict/cleanDict');
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  height: 80vh;
  overflow-x: hidden;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>